<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>中国地图绘制</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .title {
      height: 46px;
      line-height: 46px;
      font-size: 20px;
      text-align: center;
      font-weight: bold;
    }

    .echarts-div,
    .echarts-div2 {
      width: 100%;
      min-width: 800px;
      min-height: 800px;
      margin: 0 auto;
      border: 1px solid red;
    }

    .echarts-div2 {
      height: 800px;
    }
  </style>
</head>

<body>
  <div id="div"></div>
  <div id="div2"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
  <script>
    const dataList = [{
        title: '中国城市',
        className: 'china-cities',
        mapJsonName: 'china-cities',
      },
      {
        title: '中国等高线',
        className: 'china-contour',
        mapJsonName: 'china-contour'
      },
      {
        title: '中国地图',
        className: 'china',
        mapJsonName: 'china'
      },
      {
        title: '世界地图',
        className: 'world',
        mapJsonName: 'world'
      }
    ]
    let eleCon = ''
    for (let i = 0, len = dataList.length; i < len; i++) {
      eleCon += `
          <div class="container">
            <div class="title">${dataList[i].title}</div>
            <div class="echarts-div ${dataList[i].mapJsonName}"></div>
      </div>`
    }
    document.querySelector('#div').innerHTML = eleCon
    const dataList2 = [{
        title: '安徽',
        className: 'anhui',
        mapJsonName: 'anhui'
      },
      {
        title: '澳门',
        className: 'aomen',
        mapJsonName: 'aomen'
      },
      {
        title: '北京',
        className: 'beijing',
        mapJsonName: 'beijing'
      },
      {
        title: '重庆',
        className: 'chongqing',
        mapJsonName: 'chongqing'
      },
      {
        title: '福建',
        className: 'fujian',
        mapJsonName: 'fujian'
      },
      {
        title: '甘肃',
        className: 'gansu',
        mapJsonName: 'gansu'
      },
      {
        title: '广东',
        className: 'guangdong',
        mapJsonName: 'guangdong'
      },
      {
        title: '广西',
        className: 'guangxi',
        mapJsonName: 'guangxi'
      },
      {
        title: '贵州',
        className: 'guizhou',
        mapJsonName: 'guizhou'
      },
      {
        title: '海南',
        className: 'hainan',
        mapJsonName: 'hainan'
      },
      {
        title: '河北',
        className: 'hebei',
        mapJsonName: 'hebei'
      },
      {
        title: '黑龙江',
        className: 'heilongjiang',
        mapJsonName: 'heilongjiang'
      },
      {
        title: '河南',
        className: 'henan',
        mapJsonName: 'henan'
      },
      {
        title: '湖北',
        className: 'hubei',
        mapJsonName: 'hubei'
      },
      {
        title: '湖南',
        className: 'hunan',
        mapJsonName: 'hunan'
      },
      {
        title: '江苏',
        className: 'jiangsu',
        mapJsonName: 'jiangsu'
      },
      {
        title: '江西',
        className: 'jiangxi',
        mapJsonName: 'jiangxi'
      },
      {
        title: '吉林',
        className: 'jilin',
        mapJsonName: 'jilin'
      },
      {
        title: '辽宁',
        className: 'liaoning',
        mapJsonName: 'liaoning'
      },
      {
        title: '内蒙古',
        className: 'neimenggu',
        mapJsonName: 'neimenggu'
      },
      {
        title: '宁夏',
        className: 'ningxia',
        mapJsonName: 'ningxia'
      },
      {
        title: '青海',
        className: 'qinghai',
        mapJsonName: 'qinghai'
      },
      {
        title: '山东',
        className: 'shandong',
        mapJsonName: 'shandong'
      },
      {
        title: '上海',
        className: 'shanghai',
        mapJsonName: 'shanghai'
      },
      {
        title: '山西',
        className: 'shanxi',
        mapJsonName: 'shanxi'
      },
      {
        title: '陕西',
        className: 'shanxi1',
        mapJsonName: 'shanxi1'
      },
      {
        title: '四川',
        className: 'sichuan',
        mapJsonName: 'sichuan'
      },
      {
        title: '台湾',
        className: 'taiwan',
        mapJsonName: 'taiwan'
      },
      {
        title: '天津',
        className: 'tianjin',
        mapJsonName: 'tianjin'
      },
      {
        title: '香港',
        className: 'xianggang',
        mapJsonName: 'xianggang'
      },
      {
        title: '西藏',
        className: 'xizang',
        mapJsonName: 'xizang'
      },
      {
        title: '云南',
        className: 'yunnan',
        mapJsonName: 'yunnan'
      },
      {
        title: '浙江',
        className: 'zhejiang',
        mapJsonName: 'zhejiang'
      },
    ]
    let eleCon2 = ''
    for (let i = 0, len = dataList2.length; i < len; i++) {
      eleCon2 += `
          <div class="container">
            <div class="title">${dataList2[i].title}</div>
            <div class="echarts-div2 ${dataList2[i].mapJsonName}"></div>
      </div>`
    }
    document.querySelector('#div2').innerHTML = eleCon2
  </script>
  <script>
    function drawEchartsMap(className, mapJsonName) {
      // 基于div初始化echarts实例
      let mEcharts = echarts.init(document.querySelector(`.${className}`))
      // 每个城市的空气质量
      let DataPM = [{
          name: '台湾',
          value: 39.4
        },
        {
          name: '河北',
          value: 56
        },
        {
          name: '山西',
          value: 79
        },
        {
          name: '内蒙古',
          value: 60
        },
        {
          name: '安徽',
          value: 78
        },
        {
          name: '澳门',
          value: 99.4
        },
        {
          name: '北京',
          value: 25.6
        },
        {
          name: '重庆',
          value: 54.3
        },
        {
          name: '福建',
          value: 5.7
        },
        {
          name: '甘肃',
          value: 6.9
        },
        {
          name: '广东',
          value: 158.4
        },
        {
          name: '广西',
          value: 167.9
        },
        {
          name: '贵州',
          value: 94.7
        },
        {
          name: '海南',
          value: 6.1
        },
        {
          name: '黑龙江',
          value: 108.3
        },
        {
          name: '河南',
          value: 72.5
        },
        {
          name: '湖北',
          value: 194
        },
        {
          name: '湖南',
          value: 85.6
        },
        {
          name: '江苏',
          value: 94.1
        },
        {
          name: '江西',
          value: 24.5
        },
        {
          name: '吉林',
          value: 98
        },
        {
          name: '辽宁',
          value: 175
        },
        {
          name: '宁夏',
          value: 15.4
        },
        {
          name: '青海',
          value: 78.6
        },
        {
          name: '山东',
          value: 38.9
        },
        {
          name: '上海',
          value: 54.6
        },
        {
          name: '四川',
          value: 24
        },
        {
          name: '天津',
          value: 68
        },
        {
          name: '香港',
          value: 174
        },
        {
          name: '新疆',
          value: 10.1
        },
        {
          name: '西藏',
          value: 2.6
        },
        {
          name: '云南',
          value: 6.1
        },
        {
          name: '浙江',
          value: 54.3
        },
        {
          name: '陕西',
          value: 76.2
        },
      ]
      // 涟漪特效的坐标
      let scatterData = [{
          value: [123.429096, 41.796767]
        },
        {
          value: [114.298572, 30.584355]
        }
      ]
      // 使用axios获取中国地图的json数据，获取成功之后，调用回调函数
      $.get(`./vectorMapData/${mapJsonName}.json`, function (ret) {
        // echarts全局注册中国地图
        echarts.registerMap('china', ret)
        let option = {
          geo: {
            // 类型为地图
            type: 'map',
            // 地图的数据，必须和echarts全局中注册的china名称一致
            map: 'china',
            // 显示地图各个省份的名称
            label: {
              show: true
            },
            // 地图的缩放比例
            zoom: 1.2,
            // 设置允许拖动缩放
            roam: true,
            // 以经纬度作为地图的中心点
            center: [114.509062, 25.044332]
          },
          grid: {
            left: '5%',
            right: '15%',
            bottom: '10%'
          },
          series: [{
              // 每个省的空气质量数据
              data: DataPM,
              // 将空气质量的数据和geo进行关联
              geoIndex: 0,
              // 关联的类型
              type: 'map'
            },
            {
              // 图形类型为涟漪图
              type: 'effectScatter',
              // 涟漪的坐标数据
              data: scatterData,
              // 以geo为坐标进行显示
              coordinateSystem: 'geo',
              // 涟漪特效的配置
              rippleEffect: {
                // 特效的缩放比例
                scale: 5
              }
            }
          ],
          // legend: {},
          toolbox: {
            right: 10,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          visualMap: {
            // type: 'piecewise',
            show: false,
            // 指定最小值
            min: 0,
            // 指定最大值
            max: 200,
            // 指定空气质量变化的颜色
            inRange: {
              color: ['white', 'red']
            },
            // 出现滑块，过滤空气质量的城市
            calculable: true
          }
        }
        // 指定配置及数据到echarts中
        mEcharts.setOption(option)
        window.onresize = function () {
          mEcharts.resize()
        }
      })
    }
  </script>
  <script>
    for (let i = 0, len = dataList.length; i < len; i++) {
      drawEchartsMap(dataList[i].className, dataList[i].mapJsonName)
    }
  </script>
  <script>
    function drawsProvincialMap(className, mapJsonName) {
      // 基于div初始化echarts实例
      let mEcharts = echarts.init(document.querySelector(`.${className}`))
      // 每个城市的空气质量
      let DataPM = [{
        name: '台湾',
        value: 39.4
      }]
      // 使用axios获取中国地图的json数据，获取成功之后，调用回调函数
      $.get(`./vectorMapData/provincialData/${mapJsonName}.json`, function (ret) {
        // console.log(ret);
        // echarts全局注册中国地图
        echarts.registerMap(mapJsonName, ret)
        let option = {
          geo: {
            // 类型为地图
            type: 'map',
            // 地图的数据，必须和echarts全局中注册的china名称一致
            map: mapJsonName,
            // 显示地图各个省份的名称
            label: {
              show: true
            },
            // 地图的缩放比例
            zoom: 1,
            // 设置允许拖动缩放
            // roam: true
          },
          grid: {
            left: '5%',
            right: '15%',
            bottom: '10%'
          },
          series: [{
            // 每个省的空气质量数据
            // data: DataPM,
            // 将空气质量的数据和geo进行关联
            geoIndex: 0,
            // 关联的类型
            type: 'map',
            // mapType: mapJsonName
          }]
        }
        // 指定配置及数据到echarts中
        mEcharts.setOption(option)
        window.onresize = function () {
          mEcharts.resize()
        }
      })
    }
  </script>
  <script>
    for (let i = 0, len = dataList2.length; i < len; i++) {
      drawsProvincialMap(dataList2[i].className, dataList2[i].mapJsonName)
    }
  </script>
</body>

</html>